<!doctype html>
<html>
<head>
<meta charset="utf-8"/>

<title>DOM Test Runner</title>
<link rel="stylesheet" href="../../../tools/jasmine/jasmine.css">
<script src="http://a.tbcdn.cn/p/cloudyrun/1.0/cloudyrun-jasmine-pkg.js"></script>

<script src="../../../build/seed.js" charset="utf-8"></script>
<script src="../../../build/ua.js" charset="utf-8"></script>
<script src="../data.js" charset="utf-8"></script>
<script src="../attr.js" charset="utf-8"></script>
<script src="../base.js" charset="utf-8"></script>
<script src="../class.js" charset="utf-8"></script>
<script src="../create.js" charset="utf-8"></script>
<script src="../insertion.js" charset="utf-8"></script>
<script src="../offset.js" charset="utf-8"></script>
<script src="../selector.js" charset="utf-8"></script>
<script src="../style-ie.js" charset="utf-8"></script>
<script src="../style.js" charset="utf-8"></script>
<script src="../traversal.js" charset="utf-8"></script>
<script src="../../dom.js" charset="utf-8"></script>
<script>
    KISSY.__combines = {};
</script>
<style>
    body {
        font-size: 16px;
    }
</style>
</head>
<body>
<h1>KISSY DOM Test Cases</h1>

<div id="test_cases">

<!--selector-spec start-->

<div id="test-selector">
    <div class="test-selector" id="test-selector-1">
        <div class="test-selector">
            <s id="test-selector-tag"></s>
        </div>
    </div>

    <div class="test-selector" id="test-selector-2">
        <p class="test-selector">
            <s></s>
        </p>
    </div>
</div>
<!--selector-spec end-->


<!-- attr-spec start-->
<div id="test-data">
    <input id='hidepass'/>
    <p id="foo">
        <a href="../kissy/"
           style="color:red; border-top:1px solid #333;"
           class="link"
           title="test" data-test="test">test link</a>
        <input type="text" id="test-input" readonly='' maxlength="20" value="hello"/>
        <input type="radio" id="test-radio"/>
        <input type="radio" id="test-radio2" checked/>
        <label class="test" for="test-input">label</label>
        <button type="button" tabindex="3">Submit</button>
        <textarea rows="2" cols="2">
            test
        </textarea>
    </p>
    <div id="test-div"></div>
    <img id="test-img" src="./logo.png" alt="kissy"/>
    <table id="test-table" cellspacing="10">
        <tbody>
        <tr>
            <td rowspan="2" colspan="3">td</td>
        </tr>
        </tbody>
    </table>
    <select id="test-select">
        <option id="test-opt" value="1">0</option>
        <option>2</option>
        <option>3</option>
    </select>
    <select id="test-select2">
        <option>2</option>
    </select>
    <select id="test-select3" multiple autocomplete="off">
        <option selected>1</option>
        <option selected>2</option>
        <option>3</option>
    </select>
    <br/>
    <br/>
    <input type="checkbox" id="test-20100728-checkbox"/>test checked

    <br/>

    <input type="button" id="test-20100728-disabled"/>test disabled
</div>
<!-- attr-spec end-->


<!-- class-spec start -->
<div id="test-data-class">
    <p id="foo-class">
        <a href="../kissy/" style="color:red" class="link" title="test"
           data-test="test">test link</a>
        <input type="text" id="test-input-class" readonly maxlength="20" value="hello"/>
        <input type="radio" id="test-radio-class"/>
        <input type="radio" id="test-radio2-class" checked/>
        <label class="test" for="test-input">label</label>
        <button type="button" tabindex="3">Submit</button>
        <textarea rows="2" cols="2">
            test
        </textarea>
    </p>
    <div id="test-div-class"></div>
    <table id="test-table-class" cellspacing="10">
        <tbody>
        <tr>
            <td rowspan="2" colspan="3">td</td>
        </tr>
        </tbody>
    </table>
    <select id="test-select-class">
        <option id="test-opt-class" value="1">0</option>
        <option>2</option>
        <option>3</option>
    </select>
    <select id="test-select2-class">
        <option>2</option>
    </select>
    <select id="test-select3-class" multiple autocomplete="off">
        <option selected>1</option>
        <option selected>2</option>
        <option>3</option>
    </select>
</div>
<!-- class-spec end -->

<!--
offset-spec start
-->
<div id='test-offset' style="width:100px;height:100px;border: 1px solid red;">
    offset
</div>
<!--
offset-spec end
-->


<!--scroll-spec start-->
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>

<div style="width:200px;height:200px;overflow:auto;border: 5px solid #ccc;" id="scroll-container">
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <div id="scroll-el" style="border:5px solid #9f9;">
        test
    </div>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
</div>

<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<iframe src="test-dom-offset-iframe.html"
        id="test-iframe"
        style="border:1px solid black; "
        width="200"
        height="200"
        frameborder="0"
        scrolling="no"
        ></iframe>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<!--scroll-spec end-->

<!--traversal-spec start-->
<div id="test-children" class="test-parent">
    <p id="test-next"><a>1</a></p>
    <p class="test-next-p"><a class="test-a">2</a></p>
    <p class="test-next"><a id="test-parent3">3</a></p>
    <p class="test-p" id="test-prev"><em class="test-em"><span><a id="test-parent4">4</a></span></em></p>
</div>
<div id="test-contains">text node</div>
<!--traversal-spec end-->


</div>
<script src="attr-spec.js"></script>
<script src="class-spec.js"></script>
<script src="create-spec.js"></script>
<script src="data-spec.js"></script>
<script src="insertion-spec.js"></script>
<script src="offset-spec.js"></script>
<script src="scroll-spec.js"></script>
<script src="style-spec.js"></script>
<script src="traversal-spec.js"></script>
<script src="selector-spec.js"></script>
<script>

    window.onload = function() {

        CloudyRun.runJasmine();

    };
</script>
</body>
</html>